<template>
    <div class="container-demanddetail">

        <a-modal width="1100px" :visible="visible" title="审核详情" @cancel="closeModal" class="yuan-modal demand-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <DemandTopVue :showBtn="false" :detailInfo="detailInfo" v-if="detailInfo.id" />
                <div style="text-align: right;margin-bottom: 20px;">
                    <a-button type="primary" @click="clickBroker">编辑技术经纪人</a-button>
                </div>
                <div class="page-panel yuan-form">
                    <div class="form-title">技术简介</div>
                    <template v-if="detailInfo.technicalDescription">
                        <div class="content-list" v-for="item in detailInfo.technicalDescription.split('\n')">
                            {{item}}
                        </div>
                    </template>
                    <div class="content-list" v-else>无</div>
                </div>
                <div class="page-panel yuan-form">
                    <div class="form-title">其他</div>

                    <template v-if="detailInfo.otherDetails">
                        <div class="content-list" v-for="item in detailInfo.otherDetails.split('\n')">
                            {{item}}
                        </div>
                    </template>
                    <div class="content-list" v-else>无</div>
                </div>
                <div class="page-panel yuan-form">
                    <div class="form-title">需求描述</div>
                    <div v-html="detailInfo.synopsis"></div>
                    
                </div>

            </a-spin>
            <template slot="footer">
                <template v-if="!isShow">
                    <a-button @click="pass" type="primary" :loading="loading">
                        通过审核
                    </a-button>
                    <a-button @click="clickRefuse" type="danger">
                        驳回
                    </a-button>

                </template>
                <a-button @click="closeModal">
                    取消
                </a-button>

            </template>
        </a-modal>

        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="refuseCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因" prop="number">
                            <a-input v-model="rejectCause" type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因" :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
        
        <UserVue :visible="userVisible" @closeModal="() => userVisible = false" @sureClose="selectUser" />
        <a-modal width="600px" title="修改技术经纪人" :visible="brokerVisible" @ok="brokerOk" @cancel="brokerCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="brokerLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item class="yuan-form-row" label="授权经纪人">
                            <div style="display:inline-block;width:55%;border-bottom: solid 1px #eee;"
                             v-for="(item,idx) in brokerRelevances">
                                <span style="display:inline-block;width:150px;">{{item.technicalRepresentative}}</span>
                                <a-button type="danger" @click="delUser(item,idx)">移除</a-button>
                            </div>
                            <div></div>
                            <a-button type="primary" @click="()=>userVisible=true">选择技术经纪人</a-button>
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import DemandTopVue from "./components/demandTop.vue";
import UserVue from "@/components/addUserModal.vue";
@Component({
    name: "dom",
    components: { DemandTopVue,UserVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) authId!: string;
    @Prop({ default: "" }) relevanceId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetailInfo();
        }
    }
    loading = false;
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose");
        } finally {
            this.loading = false;
        }
    }
    refuseLoading = false;
    refuseVisible = false;
    clickRefuse() {
        // this.$confirm({
        //     title: "确定要驳回吗？",
        //     okText: "确定",
        //     cancelText: "取消",
        //     onOk: async () => {
        //         const res = await api.setDemandAuth({
        //             id: this.authId,
        //             auditState: 2,
        //             achievementId:this.detailInfo.achievementId,
        //             type:this.detailInfo.type
        //         });
        //         this.$message.success(res.msg);
        //         this.closeModal();
        //         this.$emit("resetList");
        //     },
        //     onCancel: () => {
        //         console.log("Cancel");
        //     },
        // });
        this.refuseVisible = true;
    }
    rejectCause=''
    async refuseOk() {
        this.refuseLoading = true;
        try {
            const res = await api.setDemandAuth({
                id: this.authId,
                rejectCause:this.rejectCause,
                state: 1,
                achievementId: this.detailInfo.achievementId,
            });
            this.refuseVisible = false;
            this.$message.success(res.msg);
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.refuseLoading = false;
        }
    }
    refuseCancel() {
        this.refuseVisible = false;
    }
    pass() {
        if(this.detailInfo.brokerRelevances.length<=0){
            this.$message.warning('请至少添加一位技术经纪人')
            return
        }
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await api.setDemandAuth({
                    id: this.authId,
                    rejectCause:'',
                    state: 2,
                    achievementId: this.detailInfo.achievementId,
                });
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    detailInfo: any = {};
    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await api.getDemandAuthList({ id: this.authId, relevanceId: this.relevanceId });
            res.data.introImageUrl = res.data.introImageUrl ? JSON.parse(res.data.introImageUrl) : [];
            res.data.demandType = res.data.differentiateDemand || "本人需求";
            res.data.placeAreaCode = res.data.code ? res.data.code.split(",") : [];

            this.brokerRelevances=JSON.parse(JSON.stringify(res.data.brokerRelevances))
            this.detailInfo = res.data;
        } finally {
            this.loading = false;
        }
    }

    brokerVisible = false;
    brokerLoading = false;
    async clickBroker() {
        this.brokerVisible = true;
    }
    async brokerOk() {

        const res = await api.addDemand({...this.detailInfo,brokerRelevances:this.brokerRelevances});
        this.$message.success("保存成功");
        this.brokerVisible = false;
        this.getDetailInfo()
    }
    brokerCancel() {
        this.brokerVisible = false;
    }
    brokerRelevances:any[]=[]
    userVisible = false;
    selectUser(userInfo) {
        if (this.brokerRelevances) {
            this.brokerRelevances.push({
                technicalRepresentative: userInfo.name,
                technicalHeadPortrait: userInfo.headPortrait,
                technicalPhone: userInfo.phone,
                addType:'PT'
            });
        } else {
            this.brokerRelevances = [
                {
                    technicalRepresentative: userInfo.name,
                    technicalHeadPortrait: userInfo.headPortrait,
                    technicalPhone: userInfo.phone,
                    addType:'PT'
                },
            ];
        }
    }
    delUser(item,idx) {
        if(item.addType!=='PT'){
            this.$message.error('不能移除用户添加的经纪人')
            return
        }
        this.brokerRelevances.splice(idx, 1);
    }
}
</script>

<style lang="scss">
.demand-detail-modal {
    .content-list {
        font-size: 16px;
        color: #2d2d2d;
        line-height: 30px;
        position: relative;
        padding-left: 20px;
    }
    .content-list::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 8px;
        background-color: #2f65f3;
        position: absolute;
        left: 0;
        top: 12px;
    }
    .page-panel {
        background-color: #fff;
        margin-bottom: 20px;
        padding: 10px 20px 20px 20px;
        border-radius: 4px;
    }
}
</style>
